<script setup lang="ts">
  import { defineProps, ref } from 'vue';
  import useSetting from '@/store/modules/setting';
  import vueQr from 'vue-qr/src/packages/vue-qr.vue';

  // 定义接受的 props 参数
  const props = defineProps<{
    uid?: string;
  }>();

  const setting = useSetting();
  const qrCodeValue = ref('http://www.csmcool.top/test/123?uid=' + props.uid);
  const qrcode = ref<typeof vueQr>(); // 实例
</script>

<template>
  <div class="qrcode-container">
    <!-- 使用 Vue QR 组件生成二维码 -->
    <vue-qr class="qrcode-content" ref="qrcode" :text="qrCodeValue" />
    <!-- 二维码提示文本 -->
    <div class="qrcode-tip">
      <p>
        请使用 <span class="highlight">{{ setting.title }}</span> 扫码登录或扫码下载APP
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .qrcode-content {
    border: 1px solid #e3e5e7;
    border-radius: 8px;
    height: 160px;
    width: 160px;
    margin-bottom: 20px;
  }

  .qrcode-tip {
    font-size: 12px;
    text-align: center;
    color: #333;
  }

  .highlight {
    color: #32b8c6;
    font-weight: bold;
  }
</style>
